<template>
    <Modal v-model="insideModal" width="500" title="教练编辑" @on-visible-change="resetForm">
        <div v-loading="contentLoading">
            <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm width_100"
                     label-position="left">
                <el-form-item label="姓名:" prop="name">
                    <el-input
                            v-model="formData.name"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large" @click="insideModal=false">取消</Button>
            <Button type="success" size="large" @click="handleSave">保存</Button>
        </div>
    </Modal>
</template>

<script>

    import SinglePhotoUploader from "./SinglePhotoUploader";

    export default {
        name: "CoachEditor",
        components: {SinglePhotoUploader},
        mounted: function () {
        },
        data() {
            return {
                formData: {},
                insideModal: false,
                contentLoading: false,
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {
            resetForm: function () {
                this.$refs.ruleForm.resetFields();
            },
            show: function (data) {
                this.formData = this.simpleClone(data);
                this.insideModal = true;
            },
            handleSave: function () {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        // 保存数据
                        const that = this;
                        this.contentLoading = true;
                        this.requestPut('/class_api/coach', this.formData, function (res) {
                            that.handleInfo(res, '保存数据成功!');
                            that.contentLoading = false;
                            that.insideModal = false;
                            that.$emit('refresh');
                            that.formData = {};
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            }
        }
    }
</script>

<style scoped>

</style>
